<template>
  <div>
    <div class="info-sec">
      <div class="title">
        <span class="fa fa-address-book-o">&nbsp;</span>基本信息
      </div>
      <div class="content">
        <div class="sub-info-sec">
          <div class="sub-title">
            姓
            <span style="visibility: hidden">占位</span>名:
          </div>
          <div class="sub-content">{{selectedEmployee.name}}</div>
        </div>
        <div class="sub-info-sec">
          <div class="sub-title">联系电话:</div>
          <div class="sub-content">{{selectedEmployee.phone}}</div>
        </div>
        <!-- <div class="sub-info-sec">
          <div class="sub-title">身份证号:</div>
          <div class="sub-content">{{selectedEmployee.idNumber}}</div>
        </div>-->
        <div class="sub-info-sec">
          <div class="sub-title">服务区域:</div>
          <div class="sub-content">
            <div v-for="area in selectedEmployee.locations">{{area}}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="info-sec">
      <div class="title">
        <span class="fa fa-id-card-o">&nbsp;</span>身份信息
      </div>
      <div class="content">
        <div class="sub-info-sec">
          <div class="sub-content">
            <img
              class="id-card-image"
              :src="imgSrc"
              alt
              v-for="imgSrc in selectedEmployee.idcardImages"
            >
            {{selectedEmployee.idcardImages.length?'':'已认证'}}
          </div>
        </div>
      </div>
    </div>
    <div class="info-sec" v-if="selectedEmployee.certificateImages.length">
      <div class="title">
        <span class="fa fa-certificate">&nbsp;</span>资质信息
      </div>
      <div class="content">
        <div class="sub-info-sec">
          <div class="sub-content">
            <img
              class="id-card-image"
              :src="imgSrc"
              alt
              v-for="imgSrc in selectedEmployee.certificateImages"
            >
          </div>
        </div>
      </div>
    </div>
    <div class="info-sec">
      <div class="title">
        <span class="fa fa-server">&nbsp;</span>业务范围
      </div>
      <div class="content">
        <div class="sub-info-sec">
          <div class="sub-content">
            <el-checkbox-group v-model="checkedOffers" @change="handleCheckedOfferChange()">
              <el-checkbox
                v-for="key in Object.keys(selectedEmployee.offers)"
                :label="key"
                :key="key"
              >{{selectedEmployee.offers[key]}}</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </div>
    </div>
    <div class="info-sec">
      <div class="title">
        <span class="fa fa-sticky-note-o">&nbsp;</span>审核备注
      </div>
      <div class="content">
        <div class="sub-info-sec">
          <el-input type="textarea" :rows="2" placeholder="请输入备注信息" v-model="tip"></el-input>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  name: 'employ_audit',
  data() {
    return {
      checkedOffers: [],
      tip: ''
    }
  },
  computed: {
    ...mapState('employeeManage', {
      selectedEmployee: state => state.selected,
      services: state => state.selected.services
    })
  },
  methods: {
    ...mapActions('employeeManage', ['auditEmployee']),
    handleCheckedOfferChange: function() {
      console.log(this.checkedOffers)
    }
  },
  created() {
    let offers = this.selectedEmployee.offers
    this.checkedOffers = Object.keys(offers)
  }
}
</script>

<style lang="stylus">
.info-sec {
  display: flex;
  border-bottom: 1px solid #e8e8e8;
  padding-bottom: 5px;
  margin: 10px 0;
}

.info-sec .title {
  flex: 1;
  font-size: 18px;
  margin: 5px;
}

.info-sec .content {
  flex: 3;
}

.info-sec .title span:first-child:before {
  min-width: 20px;
  display: inline-block;
  text-align: center;
}

.info-sec .content .sub-info-sec {
  display: flex;
  width: inherit;
  margin: 5px;
}

.info-sec .content .sub-info-sec .sub-title {
  flex: 1;
  font-size: 15px;
  max-width: 100px;
}

.info-sec .content .sub-info-sec .sub-content {
  flex: 3;
}

.info-sec .content .sub-info-sec .id-card-image {
  width: 70%;
  margin: 5px;
  border-bottom: 1px solid #e8e8e8;
}

.el-row {
  margin-left: 50px;
}

.el-row .el-col {
  padding: 10px;
}

.employee_manage .el-dialog__body {
  height: 70vh;
  overflow: auto;
}
</style>
